<template>
  <div class="common-layout">
    <el-container>
      <!-- 左侧：操作 + 设备（除发生器、标准器） -->
      <el-aside width="300px">
        <OperateCard />
        <DeviceCard v-for="item in otherDeviceArr" :key="item.id" :card-item="item"></DeviceCard>
      </el-aside>

      <el-main>
        <el-tabs tab-position="right">
          <el-tab-pane label="曲线图">
            <el-scrollbar style="height: calc(100vh - 100px)">
              <el-card
                class="mb-5px"
                shadow="hover"
                v-for="stationNum in stationNumArr"
                :key="stationNum"
              >
                <el-row :gutter="10">
                  <!-- 发生器+标准器 Card -->
                  <el-col :span="4">
                    <DeviceCard
                      v-if="generatorMap.get(stationNum)"
                      :card-item="generatorMap.get(stationNum)"
                    />
                  </el-col>
                  <el-col :span="4">
                    <DeviceCard
                      v-if="standardMap.get(stationNum)"
                      :card-item="standardMap.get(stationNum)"
                    />
                  </el-col>

                  <el-col :span="6">
                    <ToolSensorsCard
                      v-if="toolMap.get(stationNum)"
                      class="mr-3 mb-3"
                      :is-edit-mode="false"
                      :tool-data="toolMap.get(stationNum)"
                    />
                  </el-col>

                  <!-- Chart Card -->
                  <el-col :span="10">
                    <DataChart
                      :station-num="stationNum"
                      :sensor-legends="toolSensorCodesMap.get(stationNum) || []"
                      style="min-height: 250px"
                    />
                  </el-col>
                </el-row>
              </el-card>
            </el-scrollbar>
          </el-tab-pane>
          <el-tab-pane label="检定数据">
            <RecordTable4Th height="calc(100vh - 100px)" />
          </el-tab-pane>
        </el-tabs>
      </el-main>
    </el-container>
  </div>
</template>

<script setup async lang="ts">
import OperateCard from "@/views/business/detect/componments/OperateCard.vue";
import DataChart from "@/views/business/DataChart.vue";
import ToolSensorsCard from "@/views/business/sensor/components/ToolSensorsCard.vue";
import { useSensorStore } from "@/store/business/sensor.store";
import { useDevicesStore } from "@/store/business/devices.store";
import DeviceCard from "@/views/business/devices/components/DeviceCard.vue";
import RecordTable4Th from "@/views/business/detect/componments/RecordTable4Th.vue";

defineOptions({
  name: "Detect",
  inheritAttrs: false,
});

const devicesStore = useDevicesStore();
const sensorStore = useSensorStore();

// region 设备组件

const generatorMap = ref<Map<number, CardItem>>(new Map<number, CardItem>());
const standardMap = ref<Map<number, CardItem>>(new Map<number, CardItem>());
const otherDeviceArr = ref<CardItem[]>([]);
const stationNumArr = computed(() => {
  return [...generatorMap.value.keys()];
});

watch(
  () => devicesStore.activeDeviceCardList,
  (newVal) => {
    otherDeviceArr.value = [];
    newVal.forEach((item) => {
      if (item.deviceType.toLowerCase() == "generator") {
        generatorMap.value.set(item.stationNum, item);
      } else if (item.deviceType.toLowerCase() == "standard") {
        standardMap.value.set(item.stationNum, item);
      } else {
        otherDeviceArr.value.push(item);
      }
    });
  },
  { deep: true, immediate: true }
);

// endregion

// region 工位组件

const toolMap = ref<Map<number, ToolInfo>>(new Map<number, ToolInfo>());
const toolSensorCodesMap = ref<Map<number, string[]>>(new Map<number, string[]>());
watch(
  sensorStore.allTools,
  (vals: ToolInfo[]) => {
    vals.forEach((item: ToolInfo) => {
      toolMap.value.set(item.stationNum, item);
      const sensorCodes = item.sensors.map((a) => a.sensorCode);
      toolSensorCodesMap.value.set(item.stationNum, sensorCodes);
    });
  },
  { deep: true, immediate: true }
);

// endregion
</script>

<style scoped>
.card-header {
  display: flex;
  height: auto;
}
:deep(.el-card__body) {
  padding: 15px;
}
</style>
